<template>
  <div class="search">
    <div class="pai">
      <i class="el-icon-search"></i><span class="sort1">搜索</span>
    </div>
    <div class="box">
      <el-row class="demo-autocomplete">
        <el-col :span="12">
          <h4 class="title">精准搜索：</h4>
          <el-autocomplete
            class="inline-input"
            v-model="state"
            placeholder="请输入订单ID"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      state: "",
    };
  },
  watch:{
    state(newval,oldval){
      this.getIndentId(newval)
    }
  },
  methods: {
    ...mapMutations('indent',['getIndentId'])
  },
};
</script>

<style lang="scss" scoped>
.search {
  position: relative;
  .pai {
    font-size: 14px;
    color: rgb(23, 28, 73);
    font-weight: 600;
    margin-top: 40px;
    .el-icon-search {
      color: rgb(33, 61, 192);
      font-size: 18px;
      font-weight: 600;
    }
    .sort1 {
      margin: 10px 20px 0 15px;
      font-size: 17px;
      font-weight: 600;
    }
  }
  .box {
    position: absolute;
    top: -10px;
    left: 110px;
    .el-col-12 {
      width: 100%;
    }
    h4 {
      float: left;
      font-size: 16px;
      color: rgb(23, 28, 73);
      line-height: 0px;
    }
  }
}
</style>